<template>
	<div class="ui-diy">
		<div class="ui-diy-navigate">
			<div class="ui-diy-navigate-header">
				<div class="logo"><img src="../../assets/logo.png" /></div>
				<a class="logout" href="javascript:;">
					<span class="icon"></span>
					<span>返回系统后台</span>
				</a>
			</div>
			<div class="ui-diy-navigate-body">
				<div class="ui-diy-modules" v-for="item in funs">
					<h3 class="nav" v-if="item.title">{{item.title}}</h3>
					<ul class="modules-cells">
						<li class="modules-cell" v-for="mod in item.modules" :class="{'disabled': mod.disabled}" @click="handleAddModule(mod, item.base)">
							<span :class="'ui-icon ui-icon-'+mod.icon"></span>
							<span class="title">{{mod.title}}</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="ui-diy-container">
			<div class="ui-diy-header">
				<div class="right">
					<span>页面：当前首页</span>
					<span>小折官方演示站</span>
				</div>
			</div>
			<div class="ui-diy-body">
				<div class="ui-diy-view">
					<div class="ui-diy-view-content">
						<div class="ui-phone">
							<h3 class="ui-phone-title">首页</h3>
							<div class="ui-page">
								<div v-if="addedModules.length == 0" class="ui-page-none">您还没有添加任何组件</div>
								<div v-else class="ui-module-cells">
									<draggable @update="datadragEnd" v-bind="handleGetOptions()">
										<ModuleCell
											v-for="(item, index) in addedModules"
											:key="item.name + index"
											:index="index"
											:name="item.name"
											:selected="currentIndex == index"
											@on-change="handleChangeConfig"
											@on-remove="handleRemoveModule"
										>
											<md-banner 		v-if="item.name == 'banner'"	v-model="item.config"></md-banner>
											<md-tab 		v-if="item.name == 'tab'"		v-model="item.config"></md-tab>
											<md-btns 		v-if="item.name == 'btns'"		v-model="item.config"></md-btns>
											<md-subline 	v-if="item.name == 'subline'"	v-model="item.config"></md-subline>
											<md-blank 		v-if="item.name == 'blank'"		v-model="item.config"></md-blank>
											<md-atlas 		v-if="item.name == 'atlas'"		v-model="item.config"></md-atlas>
											<md-search 		v-if="item.name == 'search'"	v-model="item.config"></md-search>
											<md-btn 		v-if="item.name == 'btn'"		v-model="item.config"></md-btn>
											<md-picwindow 	v-if="item.name == 'picwindow'"	v-model="item.config"></md-picwindow>
											<md-title 		v-if="item.name == 'title'"		v-model="item.config"></md-title>
											<md-notice 		v-if="item.name == 'notice'"	v-model="item.config"></md-notice>
											<md-product 	v-if="item.name == 'product'"	v-model="item.config"></md-product>
											<md-coupon 		v-if="item.name == 'coupon'"	v-model="item.config"></md-coupon>
										</ModuleCell>
									</draggable>
								</div>
							</div>
						</div>
					</div>
					<div class="ui-diy-view-footer">
						<Button>返回列表</Button>
						<Button type="primary" style="margin-left: 7px;" @click="handleSubmit">保存设置</Button>
					</div>
				</div>
				<!-- config area -->
				<template v-for="fun in funs">
					<ConfigBox
						v-for="item in fun.modules"
						v-if="currentConfig == item.name"
						:key="item.name"
						:icon="item.icon"
						:title="item.title"
						:desc="item.desc"
					>
						<config-pageset v-if="item.name == 'set'" 		v-model="baseConfig.set"></config-pageset>
						<config-start 	v-if="item.name == 'start'" 	v-model="baseConfig.start"></config-start>
						<config-popupad v-if="item.name == 'popupad'" 	v-model="baseConfig.popupad"></config-popupad>
						<config-banner 	v-if="item.name == 'banner'" 	v-model="addedModules[currentIndex].config"></config-banner>
						<config-tab 	v-if="item.name == 'tab'"		v-model="addedModules[currentIndex].config"></config-tab>
						<config-btns 	v-if="item.name == 'btns'"		v-model="addedModules[currentIndex].config"></config-btns>
						<config-subline v-if="item.name == 'subline'"	v-model="addedModules[currentIndex].config"></config-subline>
						<config-blank 	v-if="item.name == 'blank'"		v-model="addedModules[currentIndex].config"></config-blank>
						<config-atlas 	v-if="item.name == 'atlas'"		v-model="addedModules[currentIndex].config"></config-atlas>
						<config-search 	v-if="item.name == 'search'"	v-model="addedModules[currentIndex].config"></config-search>
						<config-btn 	v-if="item.name == 'btn'"		v-model="addedModules[currentIndex].config"></config-btn>
						<config-picwindow v-if="item.name == 'picwindow'"v-model="addedModules[currentIndex].config"></config-picwindow>
						<config-title 	v-if="item.name == 'title'"		v-model="addedModules[currentIndex].config"></config-title>
						<config-notice 	v-if="item.name == 'notice'"	v-model="addedModules[currentIndex].config"></config-notice>
						<config-product v-if="item.name == 'product'"	v-model="addedModules[currentIndex].config"></config-product>
						<config-coupon 	v-if="item.name == 'coupon'"	v-model="addedModules[currentIndex].config"></config-coupon>
					</ConfigBox>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
// modules
import { CFPageSet, CFStart, CFPopupAD, CFBanner, MdBanner, CFTab, MdTab, CFBtns, MdBtns, CFSubline, MdSubline, CFBlank, MdBlank, CFAtlas, MdAtlas, CFSearch, MdSearch, CFBtn, MdBtn, CFPicWindow, MdPicWindow, CFTitle, MdTitle, CFNotice, MdNotice, CFProduct, MdProduct, CFCoupon, MdCoupon } from './modules/index.js';

// 组件
import ModuleCell from './components/ModuleCell.vue';
import ConfigBox from './components/ConfigBox.vue';
import draggable from 'vuedraggable';
const DiyModules = require('./modules.json');
export default {
	name: 'diy',
	components: {
		// config
		'config-pageset'	: CFPageSet,
		'config-start'		: CFStart,
		'config-popupad'	: CFPopupAD,
		'config-banner'		: CFBanner,
		'config-tab'		: CFTab,
		'config-btns'		: CFBtns,
		'config-subline'	: CFSubline,
		'config-blank'		: CFBlank,
		'config-atlas'		: CFAtlas,
		'config-search'		: CFSearch,
		'config-btn'		: CFBtn,
		'config-picwindow'	: CFPicWindow,
		'config-title'		: CFTitle,
		'config-notice'		: CFNotice,
		'config-product'	: CFProduct,
		'config-coupon'		: CFCoupon,
		
		// content
		'md-banner'		: MdBanner,
		'md-tab'		: MdTab,
		'md-btns'		: MdBtns,
		'md-subline'	: MdSubline,
		'md-blank'		: MdBlank,
		'md-atlas'		: MdAtlas,
		'md-search'		: MdSearch,
		'md-btn'		: MdBtn,
		'md-picwindow'	: MdPicWindow,
		'md-title'		: MdTitle,
		'md-notcie'		: MdNotice,
		'md-product'	: MdProduct,
		'md-coupon'		: MdCoupon,
		
		// 组件
		ModuleCell,
		ConfigBox,
		draggable
	},
	data() {
		return {
			funs: DiyModules.functions,
			// 已添加模块
			addedModules: [],
			// 当前选中模块下标
			currentIndex: 0,
			// 当前选中模块
			currentConfig: 'set',
			// 页面基础配置
			baseConfig: DiyModules.baseConfig
		}
	},
	mounted() {
		this.init();
		//为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        }
	},
	methods: {
		// 页面初始化，加载已有配置
		init() {
			
		},
		// 新增模块
		handleAddModule(item, base) {
			if(item.disabled) return;
			this.currentConfig = item.name;
			// 如果不是页面基础配置，容器添加对应模块
			if(!base) {
				let config = JSON.stringify(DiyModules.configs[item.name]);
				this.addedModules.push({name: item.name, config: JSON.parse(config)});
				this.currentIndex = this.addedModules.length - 1;
			}
		},
		// 切换模块
		handleChangeConfig(index, name) {
			this.currentIndex = index;
			this.currentConfig = name;
		},
		// 删除模块
		handleRemoveModule(index) {
			this.addedModules.splice(index, 1);
			if(index == 0) {
				if(this.currentIndex > 0) {
					this.currentIndex = this.currentIndex - 1;
				}else{
					this.currentIndex = 0;
				}
			}else{
				if(this.currentIndex >= index) {
					this.currentIndex = this.currentIndex - 1;
				}
			}
			if(this.addedModules.length == 0) {
				this.currentConfig = 'set';
			}else{
				this.currentConfig = this.addedModules[this.currentIndex].name;
			}
		},
		// 拖拽参数
		handleGetOptions() {
			return {
				animation: 300
			}
		},
		// 拖拽
		datadragEnd(e) {
			let dragElem = this.addedModules.splice(e.oldIndex, 1);
			this.addedModules.splice(e.newIndex, 0, dragElem[0]);
			this.currentIndex = e.newIndex;
			this.currentConfig = this.addedModules[e.newIndex].name;
		},
		// 提交
		handleSubmit() {
			console.log(this.addedModules);
		}
	}
}
</script>

<style lang="less">
@import './diy.less';
@import './page.css';
#app {
	position: relative;
	height: 100%;
}
</style>